<template>
    <div id="loginbg" class="login bubble">
        <div class="login-container">
            <div class="login-form">
                <div>
                    <h2 class="login-form-title">系统登录</h2>
                </div>
                <el-form class="login-el-form" :model="ruleForm" :rules="rules" ref="rf">
                    <el-form-item prop="username">
                        <el-input v-model="ruleForm.username" class="login-input">
                            <i slot="prefix" class="el-icon-user"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="ruleForm.password" type="password" class="login-input">
                            <i slot="prefix" class="el-icon-lock"></i>
                        </el-input>
                    </el-form-item>
                    <div class="login-form-btns">
                        <el-button class="btn" type="primary" :loading="loading" @click="loginTo('rf')">登录</el-button>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import { authToken } from '@/utils/auth';
import { loginServe, appInfoServe } from '@/serve/auth';
const asyncMenus = require('@/menu.json');

export default {
    data() {
        return {
            loading: false,
            ruleForm: {
                username: 'admin',
                password: 123456
            },
            rules: {
                username: [
                    {required: true, message: '请输入用户名', trigger: 'blur'}
                ],
                password: [
                    {required: true, message: '请输入登录密码', trigger: 'blur'}
                ]
            }
        }
    },
    mounted() {
        // this.bubble()
    },
    methods: {
        loginTo(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.login();
                    // this.asyncLogin();
                } else {
                    return false;
                }
            });
        },
        asyncLogin() {
            this.loading = true;

            loginServe().then(async (res) => {
                if(res) {
                    authToken.setToken(res.access_token);
                    // await this.$store.dispatch('setToken', res.access_token);
                    await this.$store.dispatch('setUser', res);
                    appInfoServe().then(() => {
                        this.loading = false;
                        this.$store.dispatch('setMenus', asyncMenus).then(() => {
                            this.$router.push('/home')
                        });
                    }).catch(() => {
                        this.loading = false;
                    })
                }
            }).catch(() => {
                this.loading = false;
            })

        },
        login() {
            // 登录并获取 token，用户信息，路由、菜单权限
            const res = {
                access_token: "e003ada9-7e1d-4ba8-b4c7-de0f81c18894",
                animal_user: false,
                dept_id: 21,
                expires_in: 25572,
                license: "made by jfcloud",
                refresh_token: "8a82c8e0-a48a-4475-a8da-f491e932ec33",
                scope: "server",
                tenant_id: 3,
                token_type: "bearer",
                unitId: 3,
                user_id: 94,
                username: "操作用户",
            };

            authToken.setToken(res.access_token);
            this.$store.dispatch('setToken', res.access_token);
            this.$store.dispatch('setUser', res);
            this.$store.dispatch('setMenus', asyncMenus).then(() => {
                this.$router.push('/home')
            });

        },
        getRandomColor() {
            return '#' + Math.random().toString(16).substr(2, 6).toUpperCase()
        },
        getRandomNum(min = 0, max = 100) {
            return Math.floor(Math.random() * (max - min + 1) + min)
        },
        bubble() {
            const parent = document.getElementById('loginbg')
            let bubbles = document.createDocumentFragment(), 
                num = this.getRandomNum(20, 40);
            Array(num).fill('').forEach(e => {
                let bub = document.createElement('i')
                let w = this.getRandomNum(40, 160)
                bub.className = 'bub'
                bub.style.top = `${this.getRandomNum()}%`;
                bub.style.left = `${this.getRandomNum()}%`;
                bub.style.width = `${w}px`;
                bub.style.height = `${w}px`;
                bub.style.background = this.getRandomColor();

                bubbles.appendChild(bub)
            })

            parent.appendChild(bubbles)
        }
    },
}
</script>

<style lang="scss">
@keyframes jump {
    0%{
        transform: scale(1);
    }
    25%{
        transform: scale(1.1);
    }
    75%{
        transform: scale(0.9);
    }
}
.bubble{
    position: relative;
    overflow: hidden;
    z-index: 0;
    .bub{
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 20px;
        height: 20px;
        border-radius: 100%;
        background: skyblue;
        box-shadow: 0 0 4px 6px #F2F6FC;
        z-index: -2;
        &:hover{
            z-index: -1;
            animation: 2s jump linear infinite;
        }
    }
}
</style>

<style lang="scss" scoped>
@keyframes formInit {
    0%{
        opacity: 0;
        margin-top: 0px;
    }
    100%{
        opacity: 1;
        margin-top: 165px;
    }
}
.login{
    min-height: 100%;
    // background: url('~@/assets/images/login/timg.png');
    background-color: #4d5c6e;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    .login-container{
        position: relative;
        margin: 0 auto;
        box-sizing: border-box;
        margin-top: 165px;
        padding: 0 32px;
        max-width: 520px;
        overflow: hidden;
        animation: formInit 1s ease-out;
    }

    .login-form{
        width: 100%;
        box-sizing: border-box;
        padding: 38px;
        background-color: #fff;
        border-radius: 4px;
        .login-form-title{
            text-align: center;
        }
        .login-form-btns{
            text-align: center;
            .btn{
                width: 100%;
            }
        }
        .login-el-form{
            margin-top: 20px;
        }
    }
}

</style>